import React, { Component } from 'react'

import { TabBar } from 'antd-mobile';
import './index.css'
import { Route } from 'react-router-dom';
import Index from '../Index'
import Rent from '../Rent'
import News from '../News'
import Profile from '../Profile'

const news = [
  { title: '首页', icon: 'icon-ind', path: '/home' },
  { title: '找房', icon: 'icon-findHouse', path: '/home/rent' },
  { title: '资讯', icon: 'icon-infom', path: '/home/news' },
  { title: '我的', icon: 'icon-myinfo', path: '/home/profile' }
]

export default class Home extends Component {

  render() {
    const { location: { pathname } } = this.props
    return (
      <div>
        <Route exact path='/home' component={Index} />
        <Route path='/home/rent' component={Rent} />
        <Route path='/home/news' component={News} />
        <Route path='/home/profile' component={Profile} />
        <div className='home'>
          <TabBar
            unselectedTintColor="#949494"
            tintColor="#21b97a"
            barTintColor="white"
            noRenderContent='true'
          >
            {news.map(v => (
              <TabBar.Item
                title={v.title}
                key={v.path}
                icon={<i className={`iconfont ${v.icon}`}></i>}
                selectedIcon={<i className={`iconfont ${v.icon}`}></i>}
                selected={pathname === v.path}
                onPress={() => this.props.history.push(v.path)}
                data-seed="logId"
              >
              </TabBar.Item>
            ))}

          </TabBar>
        </div>
      </div>
    )
  }
}
